<template>
	<view class="student-create">
		<view class="title">
			研学人基本信息
		</view>
		<view class="items">
			<view class="item">
				<view class="label">
					姓名
				</view>
				<view class="input">
					<input v-model="form.name" type="text" placeholder="请填写研学人真实姓名" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					身份证号
				</view>
				<view class="input">
					<input v-model="form.idCard" type="text" placeholder="请填写研学人的身份证号" />
				</view>
			</view>
			<view class="item">
				<view class="label">
					照片
				</view>
				<!-- <view class="avatar">
					<image class="img" :src="form.photoUrl || avatarIcon" mode="aspectFit" @click="chooseImage"></image>
				</view> -->
				<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="img" :src="form.photoUrl || avatarIcon" mode="aspectFit"></image>
				</button>
			</view>
		</view>
		<view class="footer-btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	import {
		apiURL
	} from '@/utils/contant.js';
	import avatarIcon from '@/static/images/avatar-update-icon.png';

	export default {
		data() {
			return {
				form: {
					name: '',
					idCard: '',
				},
				avatarIcon,
			}
		},
		onLoad(options) {
			if (options.id && options.id !== 'undefined') {
				this.getInfo(options.id);
			}
		},
		methods: {
			async getInfo(id) {
				const res = await this.$api('/study/mobile/personal/center/student/info?id=' + id, 'get', {
					id
				});
				this.form = res.data;
				this.$forceUpdate();
			},
			onChooseAvatar(e) {
				console.log(e)
				var that = this
				const {
					avatarUrl
				} = e.detail
				uni.uploadFile({
					url: apiURL + '/sys/oss/upload',
					filePath: avatarUrl,
					name: "file",
					header: {
						token: uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						const data = JSON.parse(uploadFileRes.data);
						if (data.code === 0) {
							that.form.photoId = data.data.id;
							that.form.photoUrl = data.data.src;
							uni.showToast({
								title: "上传成功",
								icon: "none",
								duration: 2000,
							});
						} else {
							uni.showToast({
								title: "上传失败",
								icon: "none",
								duration: 2000,
							});
						}
						that.$forceUpdate();
					},
				});
			},
			chooseImage() {
				const that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.log(res)
						const tempFilePaths = res.tempFilePaths;
						
						uni.uploadFile({
							url: apiURL + '/sys/oss/upload',
							filePath: tempFilePaths[0],
							name: "file",
							header: {
								token: uni.getStorageSync('token'),
							},
							success: (uploadFileRes) => {
								const data = JSON.parse(uploadFileRes.data);
								if (data.code === 0) {
									that.form.photoId = data.data.id;
									that.form.photoUrl = data.data.src;
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration: 2000,
									});
								} else {
									uni.showToast({
										title: "上传失败",
										icon: "none",
										duration: 2000,
									});
								}
								that.$forceUpdate();
							},
						});
					},
				});
			},
			async submit() {
				if (!this.form.name || !this.form.idCard) {
					uni.showToast({
						icon: 'none',
						title: '请填写完整！'
					})
					return;
				}
				if (!uni.$u.test.idCard(this.form.idCard)) {
					uni.showToast({
						icon: 'none',
						title: '身份证号不合规'
					})
					return;
				}
				uni.showLoading({
					title: '正在保存...',
				});
				const res = await this.$api(`/study/mobile/personal/center/${!this.form.id ? 'save' : 'update'}`, 'post', this
					.form);
				uni.hideLoading();
				if (res.code === 0) {
					uni.navigateBack();
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.student-create {
		margin: 30rpx;
		padding: 40rpx 30rpx 120rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.title {
			padding-bottom: 30rpx;
			border-bottom: 4rpx solid #74BB2A;
			font-weight: bold;
		}

		.items {
			margin-top: 20rpx;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-top: 1rpx solid #ccc;
				padding: 40rpx 0;

				.label {}

				.input {
					flex: 1;

					input {
						text-align: right;
						font-size: 28rpx;
					}
				}

				.avatar {
					background-color: transparent;
					border-color: transparent;
					box-shadow: none;
					border: none !important;
					padding: 0;
					margin: 0;
					line-height: 0;
					.img {
						width: 150rpx;
						height: 210rpx;
					}
				}

			}

			.item:nth-child(1) {
				border: none;
			}
		}
	}
</style>